<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'EditImg',
})
</script>
<script setup>
import { qrLinkOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
import Radar from '@/components/app/radar.vue'
import {postRadarUrlData} from '@/api'
const radarRef = ref(null)
const getDiaData = (val) => {
  console.log(toRaw(val),'radar')
  var objRaw = toRaw(val)
  form.value.link_url  = objRaw.link
  form.value.link_title = objRaw.link_title
  form.value.link_picurl= objRaw.image_url
  form.value.link_desc = objRaw.description
}
const showRadar = ()=>{
  radarRef.value.show()
}
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const getRadar = async()=>{
  var obj = form.value 
  const r = await postRadarUrlData({url:obj.link_url})
  obj.link_title = r.data.title
  obj.link_picurl= r.data.url
  obj.link_desc = r.data.desc
  form._value = obj
  console.log(r.data)
}

const dialogVisible = ref(false)

const form = ref({
  link_url:'',
  link_title:'',
  link_picurl:'',
  link_desc:''
})
const isNew = ref(true)
let initForm = {}

const formRef = ref()
const show = (val) => {
  if (!isEmpty(val)) {
    var object = deepClone(qrLinkOrignalForm)
    form.value = Object.assign(object, val)
    isNew.value = false
  } else {
    isNew.value = true
  }
  dialogVisible.value = true
}
const rules = ref({
  // title: [
  //   { required: true, message: '请输入名称', trigger: 'blur' },
  //   { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' },
  // ],
})
const change = (e) => {}
const cancel = (done) => {
  resetForm()
  dialogVisible.value = false
}
const getUploadImg = (val) => {
  form.value.link_picurl = val.url
}
const resetForm = () => {
  form.value = qrLinkOrignalForm
}
const submit = () => {
  if (!formRef) return
  formRef.value.validate((valid) => {
    if (valid) {
      emits('getDialogueData', toRaw(form.value))
      cancel()
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const emits = defineEmits(['getDialogueData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      :title="(isNew == true ? '新增' : '编辑') + '链接附件'"
      width="700px"
      :before-close="cancel"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="链接地址：" prop="title">
        <div class="app-flex-left">
          <el-input style="width: 480px;" v-model="form.link_url" placeholder="链接地址请以https开头" />
          <el-button type="primary" @click="getRadar">搜索</el-button>
          </div>
        </el-form-item>
        <div class="app-margin-bottom">
          <el-button type="primary" @click="showRadar">选择互动雷达</el-button>
        </div>
        <el-form-item label="链接标题：" prop="link_title">
          <el-input v-model="form.link_title" placeholder="" />
        </el-form-item>
        <el-form-item label="链接描述：" prop="link_desc">
          <el-input v-model="form.link_desc" placeholder="" />
        </el-form-item>
        <el-form-item label="链接封面" prop="link_picurl">
          <Upload :imgurl="form.link_picurl" @getImg="getUploadImg($event, val)" />
          
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>

      <Radar @getDiaData="getDiaData($event,val)" ref="radarRef"/>
      
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
